<template>
    <div class="login-container">
    <el-form
      :model="ruleForm2"
      :rules="rules2"
      status-icon
      ref="ruleForm2"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-page"
    >
      <h3 class="title">系统登录</h3>
      <el-form-item prop="username">
        <el-input
          type="text"
          v-model="ruleForm2.username"
          auto-complete="off"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="ruleForm2.password"
          auto-complete="off"
          placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" class="rememberme">记住密码</el-checkbox>
      <el-form-item style="width: 100%">
        <el-button
          type="primary"
          style="width: 100%"
          @click="handleSubmit"
          :loading="logining"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: true,
      logining: false,
      user : {},
      ruleForm2: {
        username: "admin",
        password: "admin",
      },
      rules2: {
        username: [
          {
            required: true,
            message: "please enter your account",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "enter your password", trigger: "blur" },
        ],
      },
      checked: false,
    };
  },
  methods: {
    sendMsg() {
      this.$emit("func", this.status);
    },

    handleSubmit(event) {
      this.$refs.ruleForm2.validate((valid) => {
     
        if (valid) {
 
          if(this.ruleForm2.username == 'admin' && this.ruleForm2.password == 'admin'){
            console.log("进来admin")
            this.$store.commit("setUser",this.ruleForm2);
           this.user=this.$store.state.user;
           console.log("拿到user"+this.user.username);
           console.log("status里面的User"+this.$store.state.user)
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.login-container {
  width: 100%;
  height: 80%;
}
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 130px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
</style>
